<template>
	<view class="ConsignmentHall bac_f8f8f8">
		<mescroll-body class="mescroll-body" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="downOption" :up="upOption" top="0rpx">
			<view class="scroll-view-item list_content" v-for="item in commodity" :key="item.id" @click="setCons(item)">
				<image :src="item.files" mode=""></image>
				<view class="list_title">
					{{item.title}}
				</view>
				<!-- <view class="list_user color_666">
					<text>寄售用户：</text>
					<text>{{item.name}}</text>
				</view> -->
				<view class="list_price">
					<!-- <text>￥</text> -->
					<text>{{item.price}}</text>
					<text>积分</text>
				</view>
			</view>
		</mescroll-body>
        <view style="height: 60rpx;"></view>
        <u-tabbar
        	:value="0"
        	:fixed="true"
        	:placeholder="false"
        	:safeAreaInsetBottom="false"
        >
        	<u-tabbar-item text="积分商城" icon="home" ></u-tabbar-item>
        	<u-tabbar-item text="我的" icon="account" @click="$u.route('/pages/index/user')" ></u-tabbar-item>
        </u-tabbar>
	</view>
</template>

<script>
    import {
        product_integral_list_json
    } from "@/api/useryk.js"
    import {Resource_url, Http_url} from "@/config/config.js"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				
				commodity: [],
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {
				
				},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					},
					textNoMore: '没有更多了'
				},
			}
		},
		onShow() {
		    uni.showTabBar()
		},
		methods: {
			
			setCons(a){
				// this.$u.vuex.set('user.interData', a)
				uni.navigateTo({
					url:`/pages/integral/integral?id=${a.id}`
				})
			},
			/*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			
			// 下拉刷新的回调, 重置列表为第一页 (此处可删,mixins已默认)
			downCallback() {
				this.commodity = []
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				// console.log(12)
				product_integral_list_json({
					list_rows: pageSize,
					page: pageNum,
					// token: this.$u.vuex.get('user.token')
				}).then(res => {
					const list = res.data.map(item => {
						return {
							...item,
							files: Resource_url + item.files
							// this.$evns + item.files
						}
					})
					this.commodity = this.commodity.concat(list)
					this.mescroll.endSuccess(list.length, list.length, list.length >= page.size)
			
				}).catch(e => {
					this.$u.toast(e.message || '')
					this.mescroll.endErr()
				})
			
			}
		}
	}
</script>

<style scoped lang="scss">
    @import '@/libs/PublicStyle.scss';
	.list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 710rpx;
	}
	
	.list_content:last-child {
		margin-bottom: 0;
	}
	
	.list_content {
		display: inline-block;
        vertical-align: top;
        width: 335rpx;
        padding: 20rpx;
        margin: 20rpx;
        
		margin-bottom: 20rpx;

		// height: 460rpx;
		background-color: #fff;
		border-radius: 10rpx;
	
		>image {
			width: 100%;
			height: 312rpx;
		}
	
		.list_title {
			font-size: 32rpx;
			font-weight: 600;
			margin: 20rpx 0;
            word-break: break-all;
		}
	
		.list_price {
			margin-top: 20rpx;
			font-size: 26rpx;
			>text:nth-child(1) {
				margin-right: 10rpx;
				font-size: 32rpx;
				font-weight: 600;
			}
		}
	
		.list_user {
			font-size: 26rpx;
		}
	}
	
	.scroll-Y {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		// margin: auto;
		width: 710rpx;
		height: 94vh;
		// margin: 30rpx 20rpx 50rpx 20rpx;
		margin: auto;
		// height: calc(100%-270)rpx;
	}
	.ConsignmentHall{
		// padding: 30rpx 0 100rpx 0;
		// height: calc(100vh - 130rpx);
	}
	
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
</style>